// 弹窗样式
<template>
  <!-- 弹窗 -->
  <div class="alert-box-bg">
    <div
      class="alert-box"
      :style="{ 'height': height + 'px', 'width': width + 'px' }"
    >
      <div class="alert-box-item">
        <!-- 头部 -->
        <div class="header">
          <p v-html="title"></p>
          <span
            class="close"
            @click="close"
          ></span>
        </div>
        <!-- 主体部分 -->
        <div class="content">
          <slot></slot>
        </div>
        <!-- 底部 -->
        <div class="footer">
          <div class="btn-group">
            <el-button
              v-if="showCancel"
              size="medium"
              @click="close"
            >{{ cancel }}</el-button>
            <el-button
              :type="successType"
              size="medium"
              @click="clickSuccess"
            >{{ success }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const log = console.log;
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  success: {
    type: String,
    default: '确定'
  },
  successType: {
    type: String,
    default: 'primary'
  },
  cancel: {
    type: String,
    default: '取消'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  width: {
    type: Number,
    default: 600
  },
  height: {
    type: Number,
    default: 380
  }
});

let emit = defineEmits(["dialogCancel", "dialogSuccess"]);

const close = () => {
  emit("dialogCancel", false)
};
const clickSuccess = () => {
  emit("dialogSuccess")
};
</script>

<style lang="scss" scoped>
$alertbox_height: 380px;
.alert-box-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  .alert-box {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    min-height: $alertbox_height;
    width: 600px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    .alert-box-item {
      display: flex;
      flex-direction: column;
      height: 100%;
      // min-height: $alertbox_height;
    }
    .header {
      padding: 16px 24px;
      border-bottom: 1px solid #eee;
      font-weight: bold;

      p {
        display: inline-block;
      }
      .close {
        display: inline-block;
        float: right;
        width: 12px;
        height: 12px;
        background: url("~@assets/close.svg") no-repeat center;
        cursor: pointer;
      }
    }
    .footer {
      padding: 16px 24px;
      border-top: 1px solid #eee;
      .btn-group {
        text-align: right;
        .el-button {
          width: 88px;
        }
      }
    }
    .content {
      overflow: hidden;
      flex: 1;
      padding: 16px 0;
      // padding: 16px 24px;
    }
  }
}

.el-button--danger {
  border-color: #e53a40;
  background-color: #e53a40;
  color: #ffffff;
}
</style>